<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <todohead :arr="goodList"></todohead>
      <todobody
        :arr="goodList"
        @getjia="jia"
        @getjian="jian"
        @getdel="del"
      ></todobody>
      <todofloot :arr="goodList"></todofloot>
    </table>
  </div>
</template>

<script>
import todohead from "./components/one-head";
import todobody from "./components/one-body";
import todofloot from "./components/one-floot";
export default {
  components: {
    todohead,
    todobody,
    todofloot,
  },
  data() {
    return {
      // goodList: JSON.parse(localStorage.getItem("goodlist")) || [],
      goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
    };
  },
  methods: {
    jia(index) {
      this.goodList[index].num++;
    },
    jian(index) {
      this.goodList[index].num > 0 && this.goodList[index].num--;
    },
    del(index) {
      this.goodList.splice(index, 1);
    },
  },
  // watch: {
  //   list: {
  //     handler(newval) {
  //       localStorage.setItem("goodlist", JSON.stringify(newval));
  //     },
  //   },
  // },
};
</script>

<style>
</style>